<template>
  <section>
    <el-tabs v-model="active">
      <el-tab-pane :label="$t('common.label.merberInfo')" name="userMessage">
        <div class="message-contain">
          <b class="label">{{ $t('common.label.jobNumber') }}</b>
          <span class="content">
            {{user.workNo}}
          </span>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.name') }}</b>

          <div class="content">
            <template v-if="isOpenData && user.staffId">
              <open-data :openid="user.staffId"></open-data>
            </template>

            <span v-else>
              {{user.displayName}}
            </span>
          </div>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.role') }}</b>

          <div class="role-contain contain">
            <!-- v-if="user.superAdmin == 2 && user.isDelete != 1 && loginUserId == user.userId"  -->
                        
            <!-- 主管理员的系统管理员tag在上面已经展示，该区域不展示 -->
            <div class="role-dom" :style="{width:user.superAdmin == 2 ? '260px' :'100%'}">
              <span 
                class="tag tag-department" 
                v-if="user.superAdmin == 2">{{ $t('common.label.administrator') }}
              </span>
              <template v-for="tag in roleNames">
                <span 
                  class="tag"
                  :key="tag">
                  {{tag}}
                </span>
              </template>
            </div>

            <el-tooltip 
              placement="top" 
              :content="$t('common.label.handOver')" 
              v-if="user.superAdmin == 2 && user.isDelete != 1 && loginUserId == user.userId">
              <i class="iconfont icon-name" @click="transAdmin"></i>
            </el-tooltip>
          </div>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.accountNumber') }}</b>
          <span class="contain">{{user.loginName}}</span>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.belongsToDepartment') }}</b>
          <div class="department-contain contain">
            <!-- 主部门信息 -->
            <div class="main-department">
              <div style="display:flex;align-items:center;">
                                
                <span class="tag tag-department">{{ $t('common.label.mainDepartment') }}</span>
                <!-- 存在主部门 -->
                <template v-if="user.mainTeamId">
                  <span class="tag company-name">{{departmentData.mainDept.tagName}}</span>
                  <el-tooltip
                    v-if="isteamLeaders(departmentData.mainDept.teamLeaders)"
                    placement="top" 
                    :content="$t('common.label.DepartmentHeads')">
                    <b class="main-tag">主</b>
                  </el-tooltip>
                </template>
              </div>
                            
              <!-- 账号未删除且有多个部门时可以更改主部门或添加主部门 -->
              <i v-if=" user.isDelete != 1 && this.userInfo && this.userInfo.tagList&& this.userInfo.tagList.length > 0" class="iconfont icon-bianji1" @click="updateMainTag"></i>
            </div>

            <!-- 非主部门 -->
            <template v-for="tag in departmentData.dept">
              <span 
                class="tag"
                v-if="tag.id != user.mainTeamId"
                :key="tag.id">
                {{tag.tagName}}
              </span>
              <el-tooltip 
                :key="tag.id"
                :content="$t('common.label.DepartmentHeads')"
                v-if="isteamLeaders(tag.teamLeaders)"
              >
                <b class="main-tag">{{ $t('common.tag.main') }}</b>
              </el-tooltip>
            </template>
          </div>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.contactPhone') }}</b>
          <span class="contain">{{user.cellPhone}}</span>
        </div>

        <div class="message-contain" v-if="_isShowEmail">
          <b class="label">{{ $t('common.label.email') }}</b>
          <span class="contain">{{user.email}}</span>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.weChat') }}</b>
          <span class="contain">{{user.wechat}}</span>
        </div>

        <div class="message-contain" v-if="haveFaceCheckGray">
          <b class="label">{{ $t('face.label1') }}  <el-tooltip class="item" effect="dark" :content="$t('face.tips1')" placement="top"><i class="iconfont icon-info cur-point"></i></el-tooltip></b>
          <span class="contain">{{ user.userFaceState ? $t('face.label2') : $t('face.label3') }}</span>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.status') }}</b>
          <span class="contain">{{user.enabled == 1 ? $t('common.base.enable') : $t('common.base.disable')}}</span>
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.createTime') }}</b>
          <span class=" contain">{{user.createTime | fmt_datetime}}</span> 
        </div>

        <div class="message-contain">
          <b class="label">{{ $t('common.label.staff') }}UserID</b>
          <span class="content wrap-cls">
            {{user.userId}}
          </span>
        </div>
      </el-tab-pane>
    </el-tabs>

    <trans-admin ref="updateAdminRef" @update="$emit('update')"></trans-admin>
    <!-- 更新主部门组件 -->
    <update-main-tag ref="updateMainTagRef" @update="$emit('update')"></update-main-tag>
  </section>
</template>

<script>
import { isOpenData } from '@src/util/platform';

import UpdateMainTag from './UpdateMainTag';
// 转交弹框
import TransAdmin from './TransAdmin';
/* util */
import { getProductLineRoleName } from '@shb-lib/tenant';
import { haveFaceCheckGray } from '@src/util/grayInfo'
/* mixin */
import { VersionControlOtherMixin } from '@src/mixins/versionControlMixin';

export default {
  name:'UserLeft',
  mixins: [VersionControlOtherMixin],

  data(){
    return {
      active:'userMessage',
      isOpenData,
      loginUserId:localStorage.getItem('userId'),
    }
  },
  props:{
    user:Object,
    userInfo:Object,
    userId:[String, Number]
  },

  components:{
    TransAdmin,
    UpdateMainTag,
  },

  computed:{
    roleTags(){
      const { roleNames = '' } = this.userInfo || {};

      const tags = roleNames.split(',');

      return tags;
    },

    departmentData(){
      let deptObj = {
        mainDept:{},
        dept:[]
      }

      if(!this.userInfo && !this.userInfo.tagList) return deptObj;

      const { tagList = [] } = this.userInfo

      tagList.map(tag => {
        if(tag.id != this.user.mainTeamId){
          deptObj.dept.push(tag)
        }else{
          deptObj.mainDept = tag
        }
      })
      return deptObj;
    },
    roles() {
      try {
        const roles = this.userInfo?.roleList
        return Array.isArray(roles) ? roles : []
      } catch (error) {
        return []
      }
    },
    roleNames() {
      return this.roles.map(role => getProductLineRoleName(role))
    },
    haveFaceCheckGray(){
      return haveFaceCheckGray()
    }
        
  },

  methods:{
    // 主管理员转交
    transAdmin(){
      this.$refs.updateAdminRef.openDialog();
    },

    updateMainTag() {
      this.$refs.updateMainTagRef.openDialog(this.user);
    },

    isteamLeaders(teamLeaders = []){
      if(!Array.isArray(teamLeaders)) return false;

      let teamLeaderIds = []
      teamLeaders.map(item => {
        teamLeaderIds.push(item.userId)
      })

      return teamLeaderIds.includes(this.userId)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../common.scss';
.message-contain{
    display: flex;
    align-items:flex-start;
    font-size: 14px;
    margin-bottom:17px;

   
    span{
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
    }

    .tag{
        display: inline-block;
        line-height: 24px;
        background: #F5F5F5;
        border-radius: 2px;
        padding:0px 8px;

        font-size: 12px;
        color: #595959;
        margin:0 8px 6px 0;
    }
    .tag-department{
        background: #FFFBE6;
        border-radius: 3px;
        border: 1px solid #FFE58F;
        font-size: 12px;
        font-weight: 400;
        color: #FAAD14;
        line-height: 19px;
        height:20px;
        white-space: nowrap;
    }
    .company-name{
        background:#FFFBE6;
        max-width:148px;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis; 
        margin-right:4px;
    }
}

.label{
    color: rgba(0, 0, 0, 0.85);
    flex-shrink: 0;
    line-height: 20px;
    margin: 0 10px px 0 0;
    width: 98px;
    word-break: break-word;
    font-weight: 400;
}
.wrap-cls{
    word-wrap: break-word;
    word-break: normal;
}
.contain{
    width:260px;
    word-break: break-all;
    display: table;
}
.role-contain{
    display:flex;
    justify-content: space-between;
    .role-dom{
        width:220px;
        
    }
    i{
        color:$color-primary-light-6;
        cursor:pointer;
    }
}
.department-contain,.role-contain{
    .super-admin,.main-department{
        display: flex;
        justify-content:space-between;
        align-items:center;
        i{
            color:$color-primary-light-6;
            cursor:pointer;
        }
        .tag{
            margin-bottom:0;
        }
    }
    .main-department{
        margin-bottom:6px;
        flex-wrap: wrap;
    }
    
}
.main-tag{
    font-weight:400;
    color:#fff;
    background:$color-primary-light-6;
    font-size:12px;
    border-radius: 2px;
    padding: 1px;
    height: 16px;
    box-sizing: border-box;
    margin:0 10px 0 0;
}
</style>